<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>增删改</title>
</head>
<style>
    body {
        width: 100%;
        height: 100vh;
        background-color: wheat;
        font-size: 30px;
        text-decoration: none;
        font-family: "华文楷体";
    }

    p {
        font-size: 40px;
        margin: 20px 0 0 0;
        font-weight: bold;
    }

    #content {
        width: 800px;
        height: auto;
        margin: 0 auto;
        background-color: #b3b1af;
    }

    #city > li {
        list-style: none;
        display: inline-block;
        background-color: gray;
        font-weight: bold;
    }

    #btn {
        margin-top: 100px;
        text-align: center;
        background-color: white;
    }

    button {
        font-size: 25px;
        width: 400px;
        height: 100px;
        margin-bottom: 20px;
    }
</style>
<body>
<div id="content">
    <p>你喜欢哪一个城市???</p>
    <ul id="city">
        <li>北京</li>
        <li>上海</li>
        <li>东京</li>
    </ul>
    <div id="btn">
        <button id="btn1">添加一个"广州"子节点在#city下面</button>
        <button id="btn2">将"广州"节点插入到"北京"前面</button>
        <button id="btn3">使用"广州"节点替换"北京"节点</button>
        <button id="btn4">删除"北京"节点</button>
        <button id="btn5">读取#city内的HTML代码</button>
        <button id="btn6">设置"上海"内的HTML代码</button>
    </div>
</div>
<div id="last"></div>
</body>
<script>
    // 定义全局函数
    function btn(button, fun) {
        let btn = document.getElementById(button)
        // 函数回调
        btn.onclick = fun
    }

    // 获取全局使用的元素
    //通过css选择器方式获取全部的"li"元素对象
    let li=document.querySelectorAll("#city li")
    console.log(li[0].innerHTML)
    let city=document.getElementById("city")

    // 添加一个"广州"子节点在#city下面
    btn("btn1",function (){
        /*
            * 方法一:
        */
        // // 创建"li"元素
        // let gz=document.createElement("li")
        // // 创建"广州"文本节点
        // let  gz_text=document.createTextNode("广州")
        // // 将"广州"文本节点添加到元素"li"中
        // gz.appendChild(gz_text)
        // // 将"li"元素添加到"#city"中
        // city.appendChild(gz)
        /*
             * 方法二:
        */
        let gz=document.createElement("li")
        gz.innerHTML="广州"
        city.appendChild(gz)
    })

    //将"广州"节点插入到"北京"前面
    btn("btn2",function (){
        // 创建"li"元素
        let gz=document.createElement("li")
        // 创建"广州"文本节点
        let  gz_text=document.createTextNode("广州")
        // 将"广州"文本节点添加到元素"li"中
        gz.appendChild(gz_text)
        // 将"广州"(li[0])节点插入到"北京"前面
        city.insertBefore(gz,li[0])
    })

    // 使用"广州"节点替换"北京"节点
    btn("btn3",function (){
        // 创建"li"元素
        let gz=document.createElement("li")
        // 创建"广州"文本节点
        let  gz_text=document.createTextNode("广州")
        // 将"广州"文本节点添加到元素"li"中
        gz.appendChild(gz_text)
        // 将"li"元素添加到"#city"中
        city.replaceChild(gz,li[0])
    })

    // 删除"北京"节点
    btn("btn4",function (){
        city.removeChild(li[0])
    })

    //读取#city内的HTML代码
    btn("btn5",function (){
        let city_HTML=city.innerHTML
        alert(city_HTML)
    })

    //设置#city内的HTML代码
    btn("btn6",function (){
        li[1].innerHTML="成都"
    })
</script>
</html>